<template>
	<view class="home ">
		<view class="wrap flexr  flexjb fr">
			<template v-if="list.length>0">
				<view class="box" v-for="(item,index) in list" :key="index" @click="goDetail(index)">
					<image src="../../static/t.png" mode="aspectFill" class="img"></image>
					<view class="pl br">
						<view class="title over-hidden2">{{item.data.title}}</view>
						<view class="mtb">开发日期：{{item.data.date}}</view>
						<view class="des over-hidden" >项目类型：{{range[item.data.des].text}}</view>
					</view>
				</view>
			</template>
			<template v-if="nomore">
				<view class="center">当前还没有项目，快去创建吧</view>
			</template>
		</view>
		
			<image src="../../static/edit.png" mode="aspectFit" class="edit" @click="goEdit"></image>
		
	</view>
</template>

<script>
import { defineComponent, reactive, toRefs } from "vue"
import { useMainStore } from "../../store"
import requestApi from '../../utils/api.js'
import { onShow } from '@dcloudio/uni-app'
	export default defineComponent({
		setup(){
			const store = useMainStore()
			const data = reactive({
				list:[],
				nomore:false,
				range: [
					{ value: 0, text: '小程序' },
					{ value: 1, text: '移动端' },
					{ value: 2, text: 'pc端' },
					{ value: 3, text: 'app' },
					{ value: 4, text: '公众号' },
					
				],
			})
			const goDetail = k =>{
				store.info = data.list[k].data
				uni.navigateTo({
					url:'/pages/detail/detail'
				})
			}
			const goEdit  = ()=>{
				uni.navigateTo({
					url:'/pages/edit/edit'
				})
			}
			const init = ()=>{
				let params = {type:'getHome'}
				requestApi('home',params).then(res=>{
					console.log('shoye',res);
					if(res.result.status==='S'){
						data.list  = res.result.data
						data.nomore = false
					}else{
						data.nomore = true
					}
				})
			}
			onShow(()=>{
				init()
			})
			
			return{
				...toRefs(data),
				goDetail,
				goEdit
			}
		}
	})
</script>

<style lang="scss">
page{
	height: 100%;
}
.home{
	width: 100%;
	height: 100%;
	overflow: auto;
	box-sizing: border-box;
	padding: 20upx ;
	background-color: #F2F3F8;
	.center{
		width: 100%;
		text-align: center;
		line-height: 500upx;
	}
	.edit{
		position: fixed;
		bottom: 200upx;
		right: 40upx;
		width: 60upx;
		height: 60upx;
		border-radius: 50%;
		border: 1upx solid #1A9ADC;
		box-shadow: 0 0 4upx #1A9ADC;
	}
	.wrap{
		width: 100%;
		
	}
	.box{
		width: 48%;
		box-sizing: border-box;
		padding-bottom: 20upx;
		background-color: #fff;
		border-radius: 20upx;
		font-size: 20upx;
		margin-bottom: 20upx;
		box-shadow: 0 0 8upx 2upx #ccc;
		.img{
			width: 100%;
			height: 300upx;
			border-radius: 20upx 20upx 0 0 ;
		}
		.pl{
			padding: 0 20upx;
		}
		.mtb{
			margin: 10upx 0;
		}
		.title{
			font-size: 24upx;
			font-weight: bold;
		}
	}
}
</style>
